<template>
  <div class="centerRight">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-vector"/>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2 ">报错信息</span>
        </div>
      </div>
      <div class="d-flex mt-1 jc-center body-box">
        <div id="app">
          <div v-if="errorMessages.length" class="errorBox">
            <strong>错误：</strong>
            <ul>
              <li v-for="error in errorMessages" :key="error">{{ error }}</li>
            </ul>
          </div>
          <!-- 这是新增的无数据盒子 -->
          <div v-else class="noDataBox">
            <div class="noDataIcon"></div>
            <div class="noDataText">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {ref, onMounted} from "vue";

export default {
  setup() {
    const errorMessages = ref<string[]>([]);
    let socket: WebSocket | null = null;

    const processBackendData = (data: any) => {
      errorMessages.value = [];

      //处理 TrayMsg
      data.trayMsg.trayErrStatus.forEach((status: boolean, index: number) => {
        if (status) {
          errorMessages.value.push(`托盘/小车#${index + 1}出现故障！`);
        }
      });

      // 处理 ScanEquipmentMsg
      data.scanEquipmentMsg.scanEquipment_PlcErrStatus.forEach((error, index) => {
        if (error) {
          const errorMsgs = [
            "供包台工作",
            "急停已按下",
            "第一段光幕报警",
            "第二段光幕报警",
            "第一段伺服报警",
            "第二段伺服报警",
            "第三段伺服报警",
            "第四段伺服报警"
          ];
          errorMsgs.forEach((msg, subIndex) => {
            if (error & (1 << subIndex)) {  // 检查每一个错误位
              errorMessages.value.push(`供包台#${index + 1}: ${msg}`);
            }
          });
        }
      });

      // data.scanEquipmentMsg.scanEquipment_PlcRealTimeStatus.forEach((status, index) => {
      //   const statusMsgs = [
      //     "第一段有件",
      //     "第二段有件",
      //     "第三段有件",
      //     "第四段有件",
      //     "第一段光幕有件",
      //     "第二段光幕有件"
      //   ];
      //   statusMsgs.forEach((msg, subIndex) => {
      //     if (status & (1 << subIndex)) {  // 检查每一个状态位
      //       errorMessages.value.push(`供包台#${index + 1}: ${msg}`);
      //     }
      //   });
      // });


      // 处理 EquipmentMsg
      data.equipmentMsg.electricalMachineryList.forEach((status, index) => {
        if (status === 2) {
          errorMessages.value.push(`电机#${index + 1}出现故障！`);
        }
      });

      data.equipmentMsg.externalEmergencyStop.forEach((status: boolean, index: number) => {
        if (status) {
          errorMessages.value.push(`外部急停按钮#${index + 1}被按下！`);
        }
      });

      // 处理 CommunicationMsg
      data.communicationMsg.electricalStatus.forEach((status, index) => {
        if (status === 2) {
          errorMessages.value.push(`通讯电机#${index + 1}故障！`);
        }
      });

      data.communicationMsg.externalEmergencyStop.forEach((status: boolean, index: number) => {
        if (status) {
          errorMessages.value.push(`通讯外部急停#${index + 1}已按下！`);
        }
      });

      data.communicationMsg.apPnStatus.forEach((status: boolean, index: number) => {
        if (status) {
          errorMessages.value.push(`AP#${index + 1}掉线！`);
        }
      });

      data.communicationMsg.clientPnStatus.forEach((status: boolean, index: number) => {
        if (status) {
          errorMessages.value.push(`客户端#${index + 1}掉线！`);
        }
      });

      // 如果没有错误消息, 则清空消息
      if (!errorMessages.value.length) {
        errorMessages.value = [];
      }
    };

    onMounted(() => {
      socket = new WebSocket('ws://100.100.100.200:18081/websockets/aibangplc');

      socket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        processBackendData(data);
      };
      socket.onerror = () => {
        errorMessages.value.push("WebSocket 连接出错");
      };

      socket.onclose = (event) => {
        if (!event.wasClean) {
          errorMessages.value.push("WebSocket 连接意外断开");
        }
      };
    });

    return {
      errorMessages
    };
  }
};
</script>

<style lang="scss" scoped>
.errorBox {
  border: 1px solid red;
  padding: 20px;
  max-width: 300px;
  background-color: #252546;
}

$box-height: 410px;
$box-width: 300px;
.centerRight {
  padding: 16px;
  padding-top: 20px;
  height: $box-height+90px;
  width: $box-width;
  border-radius: 5px;
  position: relative;

  .bg-color-black {
    height: $box-height +50px;
    border-radius: 10px;
  }

  .text {
    color: #ea153d;
  }

  // 这是新增的样式
  .noDataBox {

    width: 40%;
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    transform: translate(-60px,100px);

    .noDataIcon {
      width: 800px;
      height: 800px;
      background: url('@/assets/img/gantanhao.png') center no-repeat;
      background-size: contain;
    }

    .noDataText {
      margin-top: 12px;
      font-size: 14px;
      color: #9a9a9a;
    }
  }

  .body-box {
    border-radius: 10px;
    overflow: hidden;

    .dv-scr-board {
      width: 270px;
      height: 440px;
    }
  }

  .colorRed {
    color: red;
  }
}
</style>